<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
	<title>学子注册页面</title>
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/register.css">
	<link rel="icon" href="./img/favicon.ico">
</head>

<body>
	<!-- f1 头部 -->
	<div class="f1">
		<div class="container">
			<div class="logo pe-30">
				<a href="./index.html"></a>
			</div>
			<div class="h2 text-dark">欢迎注册</div>
		</div>
	</div>
	<!-- f2 内容 -->
	<div class="f2">
		<div class="container">
			<div class="card">
				<div class="row1">
					<div class="col h2">新用户注册</div>
					<div class="col">
						<a href="./login.html">直接登录</a>
					</div>
				</div>
				<div class="row2">
					<label for="uname">用户名：</label>
					<input type="text" id="uname" placeholder="请输入用户名">
					<span></span>
				</div>
				<div class="row2">
					<label for="upwd">密码：</label>
					<input type="password" id="upwd" placeholder="请输入密码">
					<span></span>
				</div>
				<div class="row2">
					<label for="upwd2">确认密码：</label>
					<input type="password" id="upwd2" placeholder="请再次输入密码">
					<span></span>
				</div>
				<div class="row2">
					<label for="email">邮箱：</label>
					<input type="text" id="email" placeholder="请输入邮箱">
					<span></span>
				</div>
				<div class="row2 position-relative">
					<label for="phone">手机号：</label>
					<input type="text" id="phone" placeholder="请输入手机号">
					<span></span>
					<div class="getyzm">获取验证码</div>
				</div>
				<div class="row3">
					<input type="checkbox" class="checkbtn">
					<span>我已阅读并同意用户许可协议</span>
				</div>
				<div class="row4">
					<div class="regbtn error">提交注册信息</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f3 功能菜单 -->
	<div class="f3">
		<div class="container">
			<ul class="menu">
				<li>
					<div>
						<span class="icon1"></span>
					</div>
					<div>品质保障</div>
				</li>
				<li>
					<div>
						<span class="icon2"></span>
					</div>
					<div>私人订制</div>
				</li>
				<li>
					<div>
						<span class="icon3"></span>
					</div>
					<div>学员特供</div>
				</li>
				<li>
					<div>
						<span class="icon4"></span>
					</div>
					<div>专属特权</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- f4 底部说明 -->
	<div class="f4 bg-write">
		<div class="container">
			<!-- logo部分 -->
			<div class="Footlogo">
				<div class="logo">
					<a href="#"></a>
				</div>
				<div class="footlogo"></div>
			</div>
			<!-- 底部功能列表 -->
			<div class="footList">
				<div class="title">
					<ul>
						<li>买家帮助</li>
						<li>商家帮助</li>
						<li>关于我们</li>
					</ul>
				</div>
				<div class="main">
					<ul>
						<li><a href="#">新手指南</a></li>
						<li><a href="#">服务保障</a></li>
						<li><a href="#">常见问题</a></li>
					</ul>
					<ul>
						<li><a href="#">商家入驻</a></li>
						<li><a href="#">商家后台</a></li>
					</ul>
					<ul>
						<li><a href="#">关于达内</a></li>
						<li><a href="#">联系我们</a></li>
						<li>
							<a href="#" class="wechat"></a>
							<a href="#" class="sinablog"></a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 客户端部分 -->
			<div class="khd">
				<div>
					<div>学子商城客户端</div>
					<div class="android"></div>
					<div class="ios"></div>
				</div>
				<div class="erweima"></div>
			</div>
		</div>
	</div>
	<!-- f5 版权说明 -->
	<div class="f5 bg-write">
		<div class="container">
			&copy;2017&nbsp;达内科技有限公司&nbsp;版权所有&nbsp;京ICP备08000853号-75
		</div>
	</div>
	<!-- 模态框 -->
	<div class="model">
		<div class="kuang bg-write">
			<img src="./img/tan.png">
			<div class="text-center">
				<div>注册成功！</div>
				<div>点击确定后，跳转到登录!</div>
				<div class="flex justify-center pt-15">
					<div class="questbtn">确定</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	let unameMsg = document.querySelector('#uname+span');
	let upwdMsg = document.querySelector('#upwd+span');
	let upwd2Msg = document.querySelector('#upwd2+span');
	let emailMsg = document.querySelector('#email+span');
	let phoneMsg = document.querySelector('#phone+span');
	let unameCode, upwdCode, upwd2Code, emailCode, phoneCode;
	window.onload = () => {
		uname.focus();
	}
	uname.onfocus = () => {
		unameMsg.innerHTML = '用户名应在6-8个字符之间';
		unameMsg.className = 'default';
	}
	uname.onblur = () => {
		if (!uname.value) {
			// 非空验证
			unameMsg.innerHTML = '用户名不能为空';
			unameMsg.className = 'danger';
			unameCode = 201;
			return;
		}
		let xhr = new XMLHttpRequest();
		xhr.open('GET', `/v2/users/check_uname?uname=${uname.value}`);
		xhr.onload = () => {
			let data = JSON.parse(xhr.responseText);
			unameCode = data.code;
			if (data.code == 200) {
				unameMsg.innerHTML = '恭喜!用户名可以使用!';
				unameMsg.className = 'success';
			} else {
				unameMsg.innerHTML = '用户名已存在!';
				unameMsg.className = 'danger';
			}
		}
		xhr.send();
	}
	upwd.onfocus = () => {
		upwdMsg.innerHTML = '建议密码英文,数字组合';
		upwdMsg.className = 'default';
	}
	upwd.onblur = () => {
		if (!upwd.value) {
			upwdMsg.innerHTML = '密码不能为空!';
			upwdMsg.className = 'danger';
			upwdCode = 201;
			return;
		}
		upwdMsg.innerHTML = '密码可以使用';
		upwdMsg.className = 'success';
	}
	upwd2.onfocus = () => {
		upwd2Msg.innerHTML = '再次输入密码';
		upwd2Msg.className = 'default';
	}
	upwd2.onblur = () => {
		if (!upwd2.value) {
			upwd2Msg.innerHTML = '确认密码不能为空';
			upwd2Msg.className = 'danger';
			upwd2Code = 201;
			return;
		}
		// 与第一次密码作比较
		if (upwd2.value == upwd.value) {
			upwdCode = 200;
			upwd2Code = 200;
			upwd2Msg.innerHTML = '两次密码相同';
			upwd2Msg.className = 'success';
		} else {
			upwd2Msg.innerHTML = '两次密码不一致!';
			upwd2Msg.className = 'danger';
			upwd2Code = 201;
		}
	}
	email.onfocus = () => {
		emailMsg.innerHTML = '请输入合法的邮箱';
		emailMsg.className = 'default';
	}
	email.onblur = () => {
		if (!email.value) {
			emailMsg.innerHTML = '邮箱不能为空!';
			emailMsg.className = 'danger';
			emailCode = 201;
			return;
		}
		if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)) {
			emailMsg.innerHTML = '非法的邮箱!';
			emailMsg.className = 'danger';
			emailCode = 201;
			return;
		} else {
			let xhr = new XMLHttpRequest();
			xhr.open('GET', `/v2/users/check_email?email=${email.value}`);
			xhr.onload = () => {
				let data = JSON.parse(xhr.responseText);
				emailCode = data.code;
				if (data.code == 200) {
					emailMsg.innerHTML = '邮箱可以使用!';
					emailMsg.className = 'success';
				} else {
					emailMsg.innerHTML = '邮箱已被占用!';
					emailMsg.className = 'danger';
				}
			}
			xhr.send();
		}
	}
	phone.onfocus = () => {
		phoneMsg.innerHTML = '请输入合法的手机号!';
		phoneMsg.className = 'default';
	}
	phone.onblur = () => {
		if (!phone.value) {
			phoneMsg.innerHTML = '手机号不能为空!';
			phoneMsg.className = 'danger';
			phoneCode = 201;
			return;
		}
		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			phoneMsg.innerHTML = '手机号格式不正确!';
			phoneMsg.className = 'danger';
			phoneCode = 201;
		} else {
			let xhr = new XMLHttpRequest();
			xhr.open('GET', `/v2/users/check_phone?phone=${phone.value}`);
			xhr.onload = () => {
				let data = JSON.parse(xhr.responseText);
				phoneCode = data.code;
				if (data.code == 200) {
					phoneMsg.innerHTML = '手机号可以使用!';
					phoneMsg.className = 'success';
				} else {
					phoneMsg.innerHTML = '手机号已被占用!';
					phoneMsg.className = 'danger';
				}
			}
			xhr.send();
		}
	}
	let regbtn = document.querySelector('.regbtn')
	const checkbtn = document.querySelector('.checkbtn')
	let questbtn = document.querySelector('.questbtn')
	let model = document.querySelector('.model')
	checkbtn.onchange = function() {
		// 未勾选状态
		if(this.checked == false){
			regbtn.classList.add('error')
		}else {
			// 勾选状态
			regbtn.classList.remove('error')
			regbtn.onclick = () => {
				if (checkbtn.checked == true && unameCode == 200 && upwdCode == 200 && upwd2Code == 200 && emailCode == 200 && phoneCode == 200) {
					let xhr = new XMLHttpRequest()
					xhr.open('POST', '/v2/users/register')
					xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8')
					xhr.onload = () => {
						let data = JSON.parse(xhr.responseText)
						if (data.code == 200) {
							model.style.display = 'block'
							questbtn.onclick = () => {
								model.style.display = 'none'
								location.href = "./login.html"
							}
						}
					}
					xhr.send(`uname=${uname.value}&upwd=${upwd.value}&phone=${phone.value}&email=${email.value}`);
				}
			}
		}
	}	
</script>

</html>